/*
 * @Author: duchengdong
 * @Date: 2023-07-14 19:40:01
 * @LastEditors: duchengdong
 * @LastEditTime: 2024-03-13 23:30:10
 * @Description:
 */
import {View, Text, Image, ScrollView, Pressable} from 'react-native'
import React from 'react'
import {StyleSheet} from 'react-native'
import {infoColor, successColor, warningColor, errorColor} from '../../global'
import {useRouter} from 'expo-router'

export const style = StyleSheet.create({
	container: {
		padding: 10,
		height: '100%',
		backgroundColor: '#fff',
	},
	box: {
		width: '100%',
		marginBottom: 20,
		borderRadius: 10,
		paddingHorizontal: 50,
		paddingVertical: 10,
		backgroundColor: '#fff',
		shadowColor: '#222222',
		shadowOffset: {width: 4, height: 2},
		shadowOpacity: 0.2,
		shadowRadius: 5,
		elevation: 5,
		flexDirection: 'row',
		alignItems: 'center',
	},
	title: {
		fontSize: 20,
		marginBottom: 10,
		textAlign: 'center',
		color: '#333',
		fontWeight: 700,
	},
	text: {
		fontSize: 16,
		color: infoColor,
	},
	icon: {
		width: 80,
		height: 80,
		marginRight: 36,
	},
})

export default function Home() {
	let router = useRouter()

	const goDetail = page => {
		console.log(page)
		switch (page) {
			case 1:
				router.push('/tabs/detailA')
				break
			case 2:
				router.push('/tabs/detailB')
				break
			case 3:
				router.push('/tabs/detailC')
				break
			case 4:
				router.push('/tabs/detailD')
				break
			default:
				break
		}
	}
	return (
		<ScrollView style={style.container}>
			<Pressable onPress={() => goDetail(1)}>
				<View style={style.box}>
					<Image style={style.icon} source={require('../../assets/eyeglass.jpg')} />
					<View>
						<View>
							<Text style={style.title}>佩戴距离</Text>
						</View>
						<View>
							<Text style={style.text}>80cm</Text>
						</View>
					</View>
				</View>
			</Pressable>
			<View style={style.box}>
				<Image style={style.icon} source={require('../../assets/eyeglass.jpg')} />
				<View>
					<View>
						<Text style={style.title}>佩戴状态</Text>
					</View>
					<View>
						<Text style={{...style.text, color: successColor}}>佩戴中</Text>
					</View>
				</View>
			</View>
			<Pressable onPress={() => goDetail(2)}>
				<View style={style.box}>
					<Image style={style.icon} source={require('../../assets/eyeglass.jpg')} />
					<View>
						<View>
							<Text style={style.title}>佩戴时长</Text>
						</View>
						<View>
							<Text style={style.text}>4h</Text>
						</View>
					</View>
				</View>
			</Pressable>
			<Pressable onPress={() => goDetail(3)}>
				<View style={style.box}>
					<Image style={style.icon} source={require('../../assets/eyeglass.jpg')} />
					<View>
						<View>
							<Text style={style.title}>光照强度</Text>
						</View>
						<View>
							<Text style={{...style.text, color: warningColor}}>3.3lx</Text>
						</View>
					</View>
				</View>
			</Pressable>
			<View style={style.box}>
				<Image style={style.icon} source={require('../../assets/eyeglass.jpg')} />
				<View>
					<View>
						<Text style={style.title}>人体姿态</Text>
					</View>
					<View>
						<Text style={style.text}>正常</Text>
					</View>
				</View>
			</View>
      <Pressable onPress={() => goDetail(4)}>
			<View style={style.box}>
				<Image style={style.icon} source={require('../../assets/eyeglass.jpg')} />
				<View>
					<View>
						<Text style={style.title}>疲劳程度</Text>
					</View>
					<View>
						<Text style={{...style.text, color: errorColor}}>80%</Text>
					</View>
				</View>
			</View>
      </Pressable>
		</ScrollView>
	)
}
